<template>
	<view class="contactDetail">
		<view class="topSticky">
			<view class="topInfo flex_start_center">
				<u-image width="80" height="80" :src="info.head" :lazy-load="true" radius="4"></u-image>
				<view class="topInfoItem flex_column_between_start">
					<view class="topInfoTop flex_start_center">
						<text class="name">{{info.name}}</text>
						<text class="label">{{info.position}}</text>
					</view>
					<view class="companyName nowrap-ellipsis">
						{{info.company}}
					</view>
				</view>
				<u-button text="查看名片" type="primary" @tap="toCard"></u-button>
			</view>
			<u-gap height="12" bgColor="#F7F8FA"></u-gap>
		</view>
		<view class="chartBox">
			<view class="chartTitle">
				关系线索
			</view>
			<LEchart ref="chart" style="height: calc(100% - 40px);"></LEchart>
		</view>
	</view>
</template>

<script>
	import * as echarts from '../components/lime-echart/static/echarts.min.js'
	import LEchart from '../components/lime-echart/components/l-echart/l-echart.vue';
	
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			LEchart
		},
		data() {
			return {
				firstLoad: false,
				searchVal: '',
				list: [],
				tabsList: [{
					name: '他的好友',
				}, {
					name: '关系图',
				}],
				current: 0,
				activeStyle: {
					fontWeight: 600
				},
				info: {},
				topologyData: [],
				topologyLinks: []
			}
		},
		onLoad(params) {
			if (!params.info) return
			this.info = JSON.parse(params.info)
			let data = uni.getStorageSync('openId')
			this.openId = data.openid
		},
		onReady() {
			setTimeout(() => {
				this.queryTopologyChart()
			}, 300)
		},
		methods: {
			initChart() {
				let that = this
				console.log(this.$refs.chart,'chart')
				console.log(echarts,'echarts')
				this.$refs.chart.init(echarts, chart => {
					console.log(chart,'chartinit')
					let option = {
						tooltip: {},
						animationDurationUpdate: 1500,
						animationEasingUpdate: 'quinticInOut',
						series: [{
							type: 'graph',
							layout: 'circular', //环形布局
							symbolSize: 50,
							roam: 'scale', //是否开启鼠标缩放scale和平移漫游move ,true为都开启
							label: {
								show: true
							},
							edgeSymbol: ['circle', 'arrow'],
							edgeSymbolSize: [4, 10],
							edgeLabel: {
								fontSize: 20
							},
							data: that.topologyData,
							links: that.topologyLinks,
							lineStyle: {
								opacity: 0.9,
								width: 1,
								curveness: 0
							},
							formatter: function(params) { //触发之后返回的参数，这个函数是关键
								if (params.data.name != undefined) { //如果触发节点
									console.log(params.data, '触发节点');
									return params.data.name; //返回标签
								} else { //如果触发边
									console.log(params.links, '触发边');
								}
							}
						}]
					}
					chart.setOption(option)
					// chart.on('click', params => {
					// 	// console.log(params.data, 'click事件');
					// 	let {
					// 		id: openId
					// 	} = params.data
					// 	that.queryCurrentUserInfoByOpenId(openId)
					// });
				});
			},
			toCard() {
				this.$toPage('/pagesCard/friendMainPage/friendMainPage?cardId=' + this.info.friendId + '&openId=' + this
					.info.friendOpenId + '&unionId=' + this.info.friendUnionId)
			},
			async queryTopologyChart() {
				let res = await this.$api.queryTopologyChart({
					fromOpenId: this.openId,
					endOpenId: this.info.friendOpenId
				})
				if (res.success && res.result.data && res.result.links) {
					this.topologyData = res.result.data.filter(item => item.id)
					this.topologyLinks = res.result.links.filter(item => {
						return item.source && item.target
					})
					console.log(this.topologyData, 'topologyData', this.topologyLinks)
					setTimeout(() => {
						this.initChart()
					}, 500)
				} else {
					this.topologyData = []
					this.topologyLinks = []
					this.$showToast(res.message)
					setTimeout(() => {
						// uni.navigateBack()
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F7F8FA;
	}

	.contactDetail {
		height: 100%;

		.topSticky {
			position: sticky;
			top: 0;
			z-index: 10;
			background-color: #fff;
		}

		.topInfo {
			padding: 20rpx 30rpx;
			height: 148rpx;

			.topInfoItem {
				flex: 1;
				min-width: 150rpx;
				padding-left: 24rpx;
				padding-top: 10rpx;

				.topInfoTop {
					color: #1D2129;
					font-size: 36rpx;
					font-weight: 600;

					.label {
						font-size: 28rpx;
						color: #4E5969;
						font-weight: normal;
						margin-left: 32rpx;
					}
				}

				.companyName {
					margin-top: 25rpx;
					font-size: 24rpx;
					color: #1D2129;
					width: 100%;
				}
			}

			::v-deep {
				.u-button {
					width: 176rpx !important;
					height: 56rpx !important;
					font-size: 28rpx !important;
				}
			}

		}

		.chartBox {
			min-height: 700rpx;
			max-height: calc(100% - 200rpx);
			background-color: #fff;
			padding: 26rpx 32rpx;
			box-sizing: border-box;

			.chartTitle {
				height: 44rpx;
				line-height: 44rpx;
				color: #1D2129;
				font-size: 32rpx;
				font-weight: 600;
			}
		}

	}
</style>